<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<link rel="stylesheet" href="<s:url value=" /assets/dist/css/index/index.css "></s:url>"/>
<%--分页css--%>
<link rel="stylesheet" href="<s:url value=" /assets/dist/css/pager.css "></s:url>"/>
<form:form commandName="course" cssClass="form-horizontal" role="form">
    <div class="modal-body" id="myModal">
        <div class="row modify-content">
            <input type="text" hidden id="AAB996old" value="${course.AAB996}">
            <div class="col-xs-12 modal-title">${course.BAB002}</div>
            <div class="col-xs-6" hidden>
                课程id<input type="text" id="course-id" name="BAB001" value=${course.BAB001}>
            </div>
            <div class="col-xs-6"><em>课程名额： </em>${course.BAB003}</div>
            <div class="col-xs-6 font-red">
                <em>我的排名：</em>
                <small id="ranking">23名(未在名额内)</small>
            </div>
            <div class="col-xs-6">
                <em>本课程投标点数： </em>
                <input id="AAB996" type="number" name="AAB996" min="1" value="${course.AAB996}"
                       oninput="value=value.replace(/[^\d]/g,'')">
            </div>
            <div class="col-xs-6"><em>我的剩余点数：</em>${course.AAB999}</div>
                <%--<div class="col-xs-12 btn-style">--%>
                <%--<button id="save" class="btn-style btn btn-primary">保存修改</button>--%>
                <%--<button id="return-course" class="btn-style  btn btn-danger">退课</button>--%>
                <%--</div>--%>
            <div class="col-xs-12 formater-green">提示：绿色框选区域为可入选本课程的排名区域，请同学注意自己的排名情况。</div>
            <!-- 排名表格信息 -->
            <div class="ranking-info col-xs-12">
                <ul id="ranklist" class="clear">

                    <li>第1名<br>10000点</li>

                        <%--<li>第2名<br>9000点</li>--%>
                        <%--<li>第3名<br>8000点</li>--%>
                        <%--<li>第4名<br>7000点</li>--%>
                        <%--<li>第5名<br>6000点</li>--%>
                        <%--<li>第6名<br>10000点</li>--%>
                        <%--<li>第7名<br>9000点</li>--%>
                        <%--<li>第8名<br>8000点</li>--%>
                        <%--<li>第9名<br>7000点</li>--%>
                        <%--<li>第10名<br>6000点</li>--%>
                        <%--<li>第11名<br>10000点</li>--%>
                        <%--<li>第12名<br>9000点</li>--%>
                        <%--<li>第13名<br>8000点</li>--%>
                        <%--<li>第14名<br>7000点</li>--%>
                        <%--<li>第15名<br>6000点</li>--%>
                        <%--<li>第16名<br>10000点</li>--%>
                        <%--<li>第17名<br>9000点</li>--%>
                        <%--<li>第18名<br>8000点</li>--%>
                        <%--<li>第19名<br>7000点</li>--%>
                        <%--<li>第20名<br>6000点</li>--%>
                        <%--<li>第21名<br>10000点</li>--%>
                        <%--<li>第22名<br>9000点</li>--%>
                        <%--<li>第23名<br>8000点</li>--%>
                        <%--<li>第24名<br>7000点</li>--%>
                        <%--<li class="ranking">--%>
                        <%--第25名<br>6000点<br>--%>
                        <%--<em class="red-formater">● 我的排名</em>--%>
                        <%--</li>--%>
                </ul>
                <!-- 分页按键 -->
                <div class="footer-page">
                    <ul class="pagination" id="page1"></ul>
                    <div class="pageJump">
                        <span>跳转到</span>
                        <input type="text"/>
                        <span>页</span>
                        <button type="button" class="button">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form:hidden path="sysId"/>
</form:form>


<script src="<s:url value="/assets/dist/js/pager.js"></s:url>"></script>
<script>
    var courseId = $("#course-id").val();
    function showPage(n){
        $.ajax({
            dataType: "json",
            type: "POST",
            data: JSON.stringify({bab001:courseId,currentPage:n}),
            contentType: 'application/json;charset=UTF-8',
            url: '/sys/course/rankcourse',
            success: function (datas) {
                $("#total-Page").val(datas.data.page.pageCount);
                console.log(datas);
                console.log(datas.data.rankList);
                var list = datas.data.rankList;

                var html = "";
                for (var i = 0; i < list.length; i++) {
                    var showText = list[i].aab102 == 1 ? "red-formater" : "no-red-formater";//显示排名文字
                    var showBorder = list[i].aab102 == 1 ? "red-border" : " ";//显示红色边框

                    var showRankBg =  list[i].aab101 <= 25 ? "  activess" : " "; //名额内显示背景  此处actives前加空格

                    //判断获取排名
                    if(list[i].aab102 == 1){
                        var showRank = list[i].aab101 ;
                        var html1='\<div style="display:inline-block;color:#000;">第 '+showRank+' 名</div>';
                        var html2='\<div style="display:inline-block;">第 '+showRank+' 名(未在名额内)</div>';
                        if(showRank<=25){
                            $("#ranking").html(html1);
                        }else{
                            $("#ranking").html(html2);
                        }

                    }


                    html += '\
						<li class="' + showBorder + showRankBg + '">第' + list[i].aab101 + '名<br>' + list[i].aab996 + '点<br> <em class="' + showText + '">● 我的排名</em></li>\
					';
                }
                $("#ranklist").html(html);
            }

        })
    }

    showPage(1);
    //分页事件
    Page({
        num: ${pageCount}, //页码数
        startnum: 1, //指定页码
        elem: $('#page1'), //指定的元素
        callback: function (n) { //回调函数
            showPage(n);
            console.log(n);
        }
    });











</script>